<template>
  <div>
    <el-row :gutter=15>
      <el-steps :active=active finish-status="success" simple style="margin-top: 20px">
        <el-step title="上传文件"></el-step>
        <el-step title="文件解析"></el-step>
        <el-step title="入库完成"></el-step>
      </el-steps>
<!--      <el-button type="primary" style="margin-top: 12px;float: right;margin-right: 200px" @click="nextStep">下一步-->
<!--      </el-button>-->
<!--      <el-button type="primary" style="margin-top: 12px;float: left;margin-left: 200px" @click="returnStep">上一步-->
<!--      </el-button>-->
      <el-button v-if="active===2||active===3" type="primary" style="margin-top: 12px;float: left;margin-left: 200px" @click="returnFirst">上传文件
      </el-button>

    </el-row>
    <el-row :gutter=15>
      <div class="class_upload" v-if="active===1">
        <el-upload
          :limit=1
          drag
          accept=".xlsx,.xls,.txt,.csv"
          :action="upload.url"
          :name="upload.filePath"
          :headers="upload.headers"
          :multiple=false
          :on-success="uploadSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">***只能上传.xlsx,.xls,.txt文件，且不超过100M</div>
        </el-upload>
      </div>
      <div v-else-if="active===2" class="class_form">
        <el-button type="primary" @click="submitForm('dynamicForm')">提交</el-button>
        <el-form label-width="100px" :model="dynamicForm" ref="dynamicForm">
          <el-form-item :label="'字段'+(index1+1)"
                        v-for="item in dynamicForm.forms"
                        :key="item.key"
                        :prop="'forms.' + index1 + '.value'"
                        :rules="{required: true, message: '字段名不可为空'}">
            <el-input maxlength="20" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" v-model="item.value"
                      style="width: 500px" placeholder="请输入字段名"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-row>
  </div>
</template>
<script>
  import { getToken } from '@/utils/auth'
  import { getFileHead, submitField } from '@/api/quota/sdoc/sdoc.js'

  export default {
    components: {},
    props: [],
    data() {
      return {
        active: 1,
        filePath: undefined,
        rules: {},
        dynamicForm: {
          forms: [],
          olds: []
        },
        upload: {
          filePath: 'filePath',
          headers: { Authorization: 'Bearer ' + getToken() },
          url: process.env.VUE_APP_BASE_API + '/filOpe/upload',
          updateSupport: 0
        }
      }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var map = new Map()
            let list = this.dynamicForm.forms
            for (let i = 0; i < list.length; i++) {
              map.set(this.dynamicForm.olds[i].value, list[i].value)
            }
            var dd = JSON.parse(this.MapTOJson(map))
            const params = {
              path: this.filePath,
              fields: dd
            }
            submitField(params).then((res) => {
              if (res.code === 0) {
                this.msgSuccess('提交成功')
                this.active = 3
              }
            }).catch((res) => {
                this.active=1;
                this.reset()
            })
          } else {
            this.msgError('提交失败')
            this.reset()
          }
        })
      },
      MapTOJson(m) {
        var str = '{'
        var i = 1
        m.forEach(function(item, key, mapObj) {
          if (mapObj.size == i) {
            str += '"' + key + '":"' + item + '"'
          } else {
            str += '"' + key + '":"' + item + '",'
          }
          i++
        })
        str += '}'
        return str
      },
      reset() {
        this.filePath = undefined
        this.dynamicForm.forms = []
        this.dynamicForm.olds = []
      },
      uploadSuccess(response, file, fileList) {
        if (response.code === 0) {
          this.filePath = response.data
          this.active=2;
          this.msgSuccess('上传成功')
          this.getHead();
          fileList = undefined
          file = undefined
        }
      },
      returnFirst() {
        this.reset();
        this.active=1;
      },
      nextStep() {
        if (this.active++ >= 3) this.active = 3
        if (this.active == 2 && this.filePath != undefined) {
          this.getHead()
        }
        if (this.active == 1) {
          this.filePath = undefined
        }
      },
      returnStep() {
        if (this.active-- <= 1) this.active = 1
        if (this.active == 2 && this.filePath != undefined) {
          this.getHead()
        }
      },
      getHead() {
        getFileHead(this.filePath).then((res) => {
          this.addDynamicForm(res.data)
        })
      },
      addDynamicForm(list) {
        if (list != null && list != undefined) {
          for (let i = 0; i < list.length; i++) {
            this.dynamicForm.forms.push({
              value: list[i],
              key: list[i]
            })
            this.dynamicForm.olds.push({
              value: list[i],
              key: list[i]
            })
          }
        }
      }
    }
  }

</script>
<style>
  .class_upload {
    width: 500px;
    float: contour;
    margin-right: 500px;
    margin-left: 600px;
  }

  .class_form {
    width: 500px;
    float: contour;
    margin-right: 480px;
    margin-left: 500px;
  }
</style>
